<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        .container {
            margin: 20px auto;
            width: 400px;
        }
        h1 {
            text-align: center;
        }
        p {
            margin: 20px auto;
            text-align: center;
        }
        .row {
            /* 开启弹性布局 */
            display: flex;
            height: 45px;
            /* 水平居中 */
            justify-content: center;
            /* 垂直居中 */
            align-items: center;
        }
        .row span {
            width: 60px;
        }
        .row input {
            height: 25px;
            width: 190px;
        }
        .row button {
            height: 40px;
            width: 260px;
            background-color:#fb7299;
            color: white;
            border: none;
            border-radius: 10px;
        }
        .row button:active {
            background-color: #666;
        }
    </style>

</head>
<body>

    <div class="container">
        <h1>表白墙</h1>
        <p>输入内容后点提交,信息回显示到下方表格中</p>
        <div class="row">
            <span>谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>对谁:</span>
            <input type="text">
        </div>
        <div class="row">
            <span>说:</span>
            <input type="text">
        </div>
        <div class="row">
            <button>发送</button>
        </div>
        <div class="row" id="revert">
            <button>撤回</button>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
    <script>
        let container = document.querySelector('.container');
        let buttonSend = document.querySelector('button');
        let inputs = document.querySelectorAll('input');
        buttonSend.onclick = function() {
            // 获取到输入文本框的内容
            let from = inputs[0].value;
            let to = inputs[1].value;
            let msg = inputs[2].value;
            if(from == '' || to == '' || msg == '') {
                return;
            }
            // 新增一个div,将结果添加到div中
            let result = document.createElement('div');
            result.className = 'row message';
            result.innerHTML = from + ' 对 ' + to + ' 说: ' + msg;
            container.appendChild(result);
            for(let input of inputs) {
                input.value = '';
            }

            // 这里构建出js对象(格式类似于json,键值对的形式)
            // js中要求key必须是字符串,而与之对应的value是变量/常量
            // 这里的""可以省略
            let body = {
                "from":from,
                "to":to,
                "message":msg
  
            };

            // 因为此时构建的是js对象,所以我们需要将其转化为字符串
            // js中已经内置的转换的方法
            let strBody = JSON.stringify(body);
            // 这里打印一下转换过的内容,方便观察
            console.log("strBody: "+strBody);
            // 利用jquery中的ajax来向服务器发送一个post请求,将数据提交发哦服务器中
            // 注意:此时发送post请求的操作是在用户提交数据之后执行
            $.ajax({
                type:'post',
                url:'message',
                data: JSON.stringify(body),
                contentType:"application/json; charset=utf8",
                success: function(body) {
                    console.log("数据提交成功");
                }
            });

        }
        let buttonRevert = document.querySelector('#revert');
        buttonRevert.onclick = function() {
            let arr = document.querySelectorAll('.message');
            if(arr == null || arr.length== 0) {
                return;
            }
            container.removeChild(arr[arr.length-1]);
        }

        // 当前端页面刷新的时候,需要从服务器获取到所有保存的数据
        // 利用ajax去构建get请求,获取到服务器的数据
        $.ajax({
            type:'get',
            url:'message',
            // 此时再将获取到的数据呈现在前端页面上
            success: function(body) {
                // 本来body是json格式的字符串,此时ajax自动把body转换成
                // js对象数组
                // 遍历获取到的body数组
                let container = document.querySelector('.container');
                for(let message of body) {
                    // 针对数组里面的元素,构建div
                    let result = document.createElement('div');
                    result.className = 'row message';
                    result.innerHTML = message.from + ' 对 ' + message.to + ' 说: ' + message.message;
                    container.appendChild(result);
                }
            }
        });

    </script>

</body>
</html>